<template>
  <div class="app">
    <router-view />
    <div class="footer" v-if="flag">
     <Footbar/>
    </div>
  </div>
</template>
<script>
import Footbar from '@/components/footbar.vue'
import City from '@/components/city.vue'
export default {
  data(){
    return {
      flag:true
    }
  },
  components:{
    Footbar,City
  },
  watch:{
    $route:{
      handler(n,o){
        this.flag = n.meta.flag
      },
      deep:true,
      immediate:true
    }
  }
  
}
</script>
<style>
@import './assets/reset.css';
.app{
  width:100%;
  height:100%;
  display: flex;
  flex-direction: column;
}
.app .footer{
  height:10%;
}
.router-link-active{
  color:red;
}
</style>
